
<monitor-list></monitor-list>

<!-- <div class="gutter-example">
  <div nz-row nzGutter="16">
    <div nz-col class="gutter-row" nzSpan="24" [nzXl]='8'>
      <div class="gutter-box">
        <div echarts [options]="barOption" class="bar-option"></div>
      </div>
    </div>
    <div nz-col class="gutter-row" nzSpan="24" [nzXl]='8'>
      <div class="gutter-box">
        <div echarts [options]="lineOption" class="line-option"></div>
      </div>
    </div>
    <div nz-col class="gutter-row" nzSpan="24" [nzXl]='8'>
      <div class="gutter-box">
        <nz-table #staticticsTable [nzData]="monitorStatistics" [nzShowPagination]=false class="gutter-box-table">
          <tbody>
            <tr *ngFor="let data of staticticsTable.data">
              <td>{{data.name}}</td>
              <td>{{data.value}}</td>
            </tr>
          </tbody>
        </nz-table>
      </div>
    </div>
  </div>
</div> -->
<div class="tree-map-container">
  <div #treeMapDiv class="tree-map">
    <monitor-treemap (switchFullScreen)="switchFullScreen($event)"></monitor-treemap>
  </div>
</div>
<!-- <div nz-row>
  <div nz-col nzSpan="12">
    <div class="gutter-box2">
      <div echarts [options]="gaugeOption"></div>
    </div>
  </div>
  <div nz-col nzSpan="12">
    <div class="gutter-box2">
      <div echarts [options]="pieLineOption"></div>
    </div>
  </div>
</div> -->

<!-- <div echarts [options]="chartOption" class="line-chart"></div> -->
